<template>
	<view :style="objColor">
		<!-- mine/pages/chooseCarModel/chooseCarModel.wxml -->
		<view class="atop">
			<view class="iview">
				<icon class="inputico" type="search" size="16"></icon>
				<input class="inputarea" @input="searchcarBrand" placeholder="搜索" confirm-type="search"
					placeholder-class="placeholder_inputarea" />
			</view>
		</view>
		<view class="container" v-if="carBrandList.length > 0">
			<view class="viewUl">
				<block v-if="searchtxt == ''" v-for="(item, index) in carBrandList" :key="index">
					<view class="viewLi" @tap="getCarBrandType" :data-brand="item.carBrand" :data-id="item.id"
						:data-index="index">
						<image :src="item.logoUrl"></image>
						<view class="car_brand">{{ item.carBrand }}</view>
					</view>
				</block>
				<block v-if="searchtxt != ''" v-for="(item, index) in brandList" :key="index">
					<view class="viewLi" @tap="getCarBrandType1" :data-brand="item.carBrand" :data-id="item.id"
						:data-index="index">
						<image :src="item.logoUrl"></image>
						<view class="car_brand">{{ item.carBrand }}</view>
					</view>
				</block>
			</view>
			<view class="carType viewUl" :animation="carAnimation">
				<block v-for="(item, index) in carBrandTypeList" :key="index">
					<view class="viewLi" @tap="goT" :data-cartype="item.carType" :data-cartypeid="item.id">
						<image :src="item.logoUrl"></image>
						<view class="car_brand">{{ item.carType }}</view>
					</view>
				</block>
			</view>
			<!-- <view class="findModel" @tap="findModelFun">
                找不到车型？
                <text>点这里</text>
            </view> -->
		</view>
		<view v-if="carBrandList.length <= 0&&loading">
			<Upgrading text="暂无爱车"></Upgrading>
		</view>

		<!-- 弹窗 -->
		<uni-popup ref="popup" :show="findModel" type="bottom" @close="popupVisible($event, { type: 'close' })"
			data-type="close">
			<view class="use_popup">
				<view class="pupBox">
					<view class="tit">输入车型</view>
					<view class="infoItem">
						<view class="isdisplay">
							<view class="label">车辆品牌</view>
							<input class="value" :value="carBrandKey" placeholder="请输入爱车品牌" @input="getCarBrandKey" />
						</view>
					</view>
					<view class="infoItem">
						<view class="isdisplay">
							<view class="label">车辆型号</view>
							<input class="value" :value="carTypeKey" placeholder="请输入爱车车型" @input="getCarType" />
						</view>
					</view>
					<view class="tips">提交后，工作人员将尽快核实并更新车型库</view>
					<view class="btnPup">
						<view class="btn1" @tap="popupVisible">取消</view>
						<view class="btn2" @tap="addBrandAndType">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	'use strict';
	import Upgrading from '../../../components/upgrading/upgrading';

	// exports.__esModule = true; // mine/pages/chooseCarModel/chooseCarModel.ts

	var app = getApp();

	var https_1 = require('./../../../api/https.js');

	var indexId = 0;
	export default {
		components: {
			Upgrading
		},
		// 生命周期函数--监听页面加载
		data() {
			return {
				loading: false,
				carBrandKey: '',
				carTypeKey: '',
				searchtxt: '',
				carBrandList: [],
				carAnimation: '',
				findModel: false,
				carBrandTypeList: '',
				brandList: '',
				carTypeText: '',
				brandId: '',
				carTypeId: ''
			};
		},
		onLoad: function() {
			this.getCarBrand();
		},
		methods: {
			// 动画
			typeAnimationF: function(right) {
				var carAnimation = uni.createAnimation({
					duration: 200,
					timingFunction: 'ease',
					delay: 10 // 多久后动画开始运行
				});
				carAnimation.right(right).step();
				this.carAnimation = carAnimation['export']()
			},

			findModelFun: function() {
				this.$refs.popup.open()
				this.findModel = true
			},

			popupVisible: function(e, _dataset) {
				/* ---处理dataset begin--- */
				this.datasetHandle(e, _dataset);
				/* ---处理dataset end--- */
				this.findModel = false
				this.$refs.popup.close()
			},

			//车辆品牌型号反馈
			addBrandAndType: function() {
				var that = this;

				if (this.carBrandKey == '') {
					uni.showToast({
						title: '请输入爱车品牌',
						icon: 'none',
						duration: 2000
					});
					return false;
				}

				if (this.carTypeKey == '') {
					uni.showToast({
						title: '请输入爱车车型',
						icon: 'none',
						duration: 2000
					});
					return false;
				}

				https_1
					.addBrandAndType({
						brand: this.carBrandKey,
						brandType: this.carTypeKey
					})
					.then(function(res) {
						if (res.code == 0) {
							that.$refs.popup.close()
							that.findModel = false
							uni.showModal({
								title: '信息提示',
								content: '反馈成功！',
								showCancel: false
							});
						} else {
							that.findModel = false
							uni.showModal({
								title: '信息提示',
								content: '反馈失败！',
								showCancel: false
							});
						}
					});
			},

			//爱车品牌(提交)
			getCarBrandKey: function(e) {
				this.carBrandKey = e.detail.value
			},

			//爱车车型(提交)
			getCarType: function(e) {
				this.carTypeKey = e.detail.value
			},

			// 获取品牌
			getCarBrand: function() {
				var that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				that.loading = false
				https_1.vehicleBrand().then(function(res) {
					if (res.code == 0) {
						uni.hideLoading()
						that.loading = true
						that.carBrandList = res.data
						that.carBrandTypeList = res.data[0].carBrandTypes
					} else {
						uni.hideLoading()
						that.loading = true
						that.carBrandList = []
						that.carBrandTypeList = ''
					}
					// uni.hideLoading();
					// 		that.loading=true
				});
			},

			/**
			 * 查找车辆品牌输入框事件
			 */
			searchcarBrand: function(e) {
				var stxt = e.detail.value;
				var allist = this.carBrandList;
				var brandList = [];

				for (var i = 0; i < allist.length; i++) {
					if (allist[i]['carBrand'].indexOf(stxt) != -1) {
						var carBrand = allist[i]['carBrand'];
						var id = allist[i]['id'];
						var carBrandTypes = allist[i]['carBrandTypes'];
						brandList.push({
							carBrand: carBrand,
							id: id,
							carBrandTypes: carBrandTypes
						});
					}
				}

				this.searchtxt = stxt,
					this.brandList = brandList
			},

			// 获取车型
			getCarBrandType: function(e) {
				var carBrandId = e.currentTarget.dataset.id;
				var brand = e.currentTarget.dataset.brand;
				var index = e.currentTarget.dataset.index;

				if (carBrandId == indexId) {
					this.typeAnimationF('-395rpx');
					indexId = 0;
					return;
				}

				indexId = carBrandId;
				app.globalData.bindCarDetails.carTypeText = brand; // 品牌名称

				app.globalData.bindCarDetails.brandId = carBrandId; // 品牌Id

				this.carTypeText = brand
				this.brandId = carBrandId
				this.carBrandTypeList = this.carBrandList[index].carBrandTypes
				this.typeAnimationF('0rpx');
			},

			// 获取车型（搜索）
			getCarBrandType1: function(e) {
				var carBrandId = e.currentTarget.dataset.id;
				var brand = e.currentTarget.dataset.brand;
				var index = e.currentTarget.dataset.index;

				if (carBrandId == indexId) {
					this.typeAnimationF('-395rpx');
					indexId = 0;
					return;
				}

				indexId = carBrandId;
				app.globalData.bindCarDetails.carTypeText = brand; // 品牌名称

				app.globalData.bindCarDetails.brandId = carBrandId; // 品牌Id

				this.carTypeText = brand
				this.brandId = carBrandId
				this.carBrandTypeList = this.brandList[index].carBrandTypes
				this.typeAnimationF('0rpx');
			},

			goT: function(e) {
				console.log("----==---", e)
				var carTypeText = e.currentTarget.dataset.cartype;
				var carTypeId = e.currentTarget.dataset.cartypeid;
				app.globalData.bindCarDetails.carTypeText = app.globalData.bindCarDetails.carTypeText + ' - ' +
					carTypeText;
				app.globalData.bindCarDetails.carTypeId = carTypeId; //车辆型号id

				this.carTypeText = this.carTypeText + ' - ' + carTypeText;
				this.carTypeId = carTypeId;
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2]; //上一个页面

				prevPage.carTypeText = this.carTypeText;
				prevPage.carTypeId = this.carTypeId;
				prevPage.brandId = this.brandId;
				uni.setStorageSync('chooseCarInfo', JSON.stringify({
					carTypeText: this.carTypeText,
					carTypeId: this.carTypeId,
					brandId: this.brandId
				}))
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>
<style lang="less">
	@import url("./chooseCarModel.less");
</style>